/**
 * Created by xiangjiayu on 2017/7/19.
 */

import React from 'react';
import {Icon,Button,Row,Col,Input,Select,DatePicker,Modal,AutoComplete} from 'antd';
import CheckBox from '../../../components/common/CheckBox/CheckBox';//自定义 多选框

function onSelect(value) {
}

export default class Physical extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            //弹窗
            Modal_tj_Add: false,
            Modalbeizhu:false,//备注
        };
    }
    //弹窗
        //体检新增
    showModal_tj_Add(Modal_tj_Add) {
        this.setState({ Modal_tj_Add });
    }
      //textarea
    showModalbeizhu(Modalbeizhu) {
      this.setState({ Modalbeizhu });
    }
    //自动补全
    handleSearch = (value) => {
      this.setState({
          dataSource: !value ? [] : [
            value,
            value + value,
            value + value + value,
          ],
      });
    }
    render(){
        let data_tjjg =[{
         text: '正常',
         state:true,
         type:'radio'
        },{
          text: '异常',
          state:'',
          type:'radio'
         }];
        const { dataSource } = this.state;
        return(
            <div className="modal-example-cont">
                <Button onClick={() => this.showModal_tj_Add(true)}>新增体检</Button>
                <Modal
                  title="新增体检"
                  wrapClassName="vertical-center-modal"
                  visible={this.state.Modal_tj_Add}
                  onCancel={() => this.showModal_tj_Add(false)}
                >
                    <div className="modal-add-cont">
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label className="ant-form-item-required"><span className="span-left">学员姓名</span></label>
                                </div>
                            </Col>
                            <Col span={10}>
                                <div className="ant-form-item-control has-error">
                                    {/*<Input size="large" placeholder="请输入学员姓名"/>*/}
                                    <AutoComplete
                                      dataSource={dataSource}
                                      onSelect={onSelect}
                                      onSearch={this.handleSearch}
                                      placeholder="请输入学员姓名"
                                    />
                                </div>
                            </Col>
                            <Col span={9}>
                                <div className="error-tip"><Icon type="minus-circle-o" />请输入联系电话</div>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label><span className="span-left">体检时间</span></label>
                                </div>
                            </Col>
                            <Col span={10}>
                                <div className="ant-form-item-control">
                                    <DatePicker
                                      size="large"
                                      format="YYYY-MM-DD HH:mm:ss"
                                    />
                                </div>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label><span className="span-left">体检有效期</span></label>
                                </div>
                            </Col>
                            <Col span={10}>
                                <div className="ant-form-item-control">
                                    <Select
                                        defaultValue="请选择体检有效期"
                                        size="large"
                                    >
                                        <Option value="半年">半年</Option>
                                        <Option value="一年">一年</Option>
                                        <Option value="两年">两年</Option>
                                        <Option value="三年">三年</Option>
                                        <Option value="永久">永久</Option>
                                    </Select>
                                </div>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label><span className="span-left">体检结果</span></label>
                                </div>
                            </Col>
                            <Col span={10}>
                                <div className="ant-form-item-control">
                                    <CheckBox data={data_tjjg}></CheckBox>
                                </div>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label><span className="span-left">体检备注</span></label>
                                </div>
                            </Col>
                            <Col span={18}>
                                <div className="ant-form-item-control">
                                    <div className="textarea-surplus">
                                        <Input type="textarea" rows="10" size="large" placeholder="请输入备注"/>
                                        <p>还可以输入200字</p>
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    </div>
                </Modal>
                <Button onClick={() => this.showModalbeizhu(true)}>纯备注（只有一个textarea）</Button>
                <Modal
                  title="添加备注"
                  wrapClassName="vertical-center-modal"
                  visible={this.state.Modalbeizhu}
                  onCancel={() => this.showModalbeizhu(false)}
                  okText="确定"
                  cancelText="取消"
                >
                    <div className="modal-add-cont">
                        <div className="ant-form-item-control">
                            <div className="textarea-surplus">
                                <Input type="textarea" rows={10} placeholder="请输入备注"/>
                                <p>还可以输入140字</p>
                            </div>
                        </div>
                    </div>
                </Modal>
            </div>

        )
    }
}